CSS Logikai Tulajdonságok 2. szint: Valóban globális web építése kibővített írásmód-támogatással

Évtizedekig a webfejlesztők a fizikai világból származó szókészlettel építettek elrendezéseket: top, bottom, left és right. Beállítottunk egy margin-left-et, egy padding-top-ot és egy border-right-ot. Ez a mentális modell jól szolgált minket, amíg a web túlnyomórészt balról jobbra, fentről lefelé haladó médium volt. Azonban a web globális. Egy platform minden nyelv és kultúra számára, melyek közül sok nem követi ezt az egyszerű irányított folyamatot.

Az olyan nyelveket, mint az arab és a héber, jobbról balra írják. A hagyományos japánt és kínait lehet függőlegesen írni, fentről lefelé és jobbról balra. Egy fizikai, balról jobbra haladó CSS modell rákényszerítése ezekre az írásrendszerekre hibás elrendezéseket, frusztráló felhasználói élményt és egy halom kód-felülírást eredményez. Itt jönnek képbe a CSS Logikai Tulajdonságok és Értékek, amelyek egy alapvető paradigmaváltást jelentenek a fizikai irányokról a folyamat-relatív, logikai irányokra. Míg az 1. szint lefektette az alapokat, a CSS Logikai Tulajdonságok 2. szintje teszi teljessé a képet, biztosítva azokat az eszközöket, amelyekre szükségünk van az valóban univerzális, írásmód-tudatos felhasználói felületek építéséhez.

Ez az átfogó útmutató mélyrehatóan bemutatja a 2. szint által hozott fejlesztéseket. Kezdjük az alapfogalmak felelevenítésével, majd felfedezzük a hiányosságokat pótló új tulajdonságokat és értékeket, végül pedig mindezt a gyakorlatba ültetjük egy olyan komponens létrehozásával, amely zökkenőmentesen alkalmazkodik bármilyen írásmódhoz. Készüljön fel arra, hogy örökre megváltoztassa a CSS elrendezésről alkotott gondolkodásmódját.

Gyors ismétlés: A logikai tulajdonságok alapfogalmai (1. szint)

Mielőtt értékelni tudnánk a 2. szint újdonságait, szilárdan meg kell értenünk az 1. szint által lefektetett alapokat. Az egész rendszer két kulcsfontosságú koncepcióra épül: a writing mode (írásmód) és az ebből következő blokk- és inline tengelyekre.

A négy írásmód

A writing-mode CSS tulajdonság határozza meg a szöveg elrendezésének irányát. Bár gyakran természetesnek vesszük az alapértelmezett beállítást, több olyan érték is létezik, amely alapvetően megváltoztatja a tartalom áramlását az oldalon:

• horizontal-tb: Ez az alapértelmezett a legtöbb nyugati nyelv esetében. A szöveg vízszintesen (inline tengely) folyik balról jobbra (vagy az írásiránytól függően jobbról balra), a sorok pedig fentről lefelé (blokk tengely) rendeződnek.
• vertical-rl: Hagyományos kelet-ázsiai tipográfiához (pl. japán, kínai) használják. A szöveg függőlegesen folyik fentről lefelé (inline tengely), a sorok pedig jobbról balra (blokk tengely) rendeződnek.
• vertical-lr: Hasonló az előzőhöz, de a sorok balról jobbra (blokk tengely) rendeződnek. Ritkábban használják, de előfordul bizonyos kontextusokban, mint például a mongol írás.
• sidelong-rl / sidelong-lr: Ezeket speciális esetekben használják, amikor a karaktereket az oldalukra fektetve szeretnénk elrendezni. Általános webes tartalmakban ritkábban fordulnak elő.

A kulcsfontosságú koncepció: Blokk vs. Inline tengely

Ez a legfontosabb megértendő koncepció. Egy logikai világban abbahagyjuk a „függőleges” és „vízszintes” gondolkodást, és a blokk és inline tengelyek mentén kezdünk gondolkodni. Ezek orientációja teljes mértékben a writing-mode-tól függ.

• Az Inline tengely az az irány, amerre a szöveg egyetlen soron belül folyik.
• A Blokk tengely az az irány, amerre az új sorok egymásra épülnek.

Nézzük meg, hogyan működik ez a gyakorlatban:

• Szabványos magyar nyelv esetén (writing-mode: horizontal-tb): Az inline tengely vízszintesen fut, a blokk tengely pedig függőlegesen.
• Hagyományos japán nyelv esetén (writing-mode: vertical-rl): Az inline tengely függőlegesen fut, a blokk tengely pedig vízszintesen.

Mivel ezek a tengelyek felcserélődhetnek, az olyan tulajdonságok, mint a width és a height, kétértelművé válnak. A width a vízszintes tengely menti méretet vagy az inline tengely menti méretet jelenti? A logikai tulajdonságok megoldják ezt a kétértelműséget. Mostantól minden tengelyhez van start és end:

• block-start: A „felső” magyarul, de a „jobb” a függőleges japán írásmódban.
• block-end: Az „alsó” magyarul, de a „bal” a függőleges japán írásmódban.
• inline-start: A „bal” magyarul, de a „felső” a függőleges japán írásmódban.
• inline-end: A „jobb” magyarul, de az „alsó” a függőleges japán írásmódban.

Fizikai és logikai tulajdonságok megfeleltetése (1. szint)

Az 1. szint a fizikai tulajdonságok logikai megfelelőinek átfogó készletét vezette be. Íme néhány kulcsfontosságú példa:

• width → inline-size
• height → block-size
• min-width → min-inline-size
• max-height → max-block-size
• margin-left → margin-inline-start
• margin-right → margin-inline-end
• margin-top → margin-block-start
• margin-bottom → margin-block-end
• padding-left → padding-inline-start
• padding-top → padding-block-start
• border-right → border-inline-end
• border-bottom → border-block-end
• left / right (pozicionáláshoz) → inset-inline-start / inset-inline-end
• top / bottom (pozicionáláshoz) → inset-block-start / inset-block-end

Az 1. szint olyan hasznos rövidítéseket is adott nekünk, mint a margin-inline (a start és end értékekre) és a padding-block (a start és end értékekre).

Üdvözöljük a 2. szinten: Újdonságok és miért fontosak

Bár az 1. szint monumentális előrelépés volt, hagyott néhány észrevehető hiányosságot. Bizonyos alapvető CSS tulajdonságoknak, mint a float, clear és resize, nem volt logikai megfelelőjük. Továbbá az olyan tulajdonságokat, mint a border-radius, nem lehetett logikailag vezérelni, ami arra kényszerítette a fejlesztőket, hogy a finomhangolt stílusokhoz visszatérjenek a fizikai tulajdonságokhoz. Ez azt jelentette, hogy egy elrendezést 90%-ban logikai tulajdonságokkal építhetett meg az ember, de a különböző írásmódokhoz még mindig szüksége volt fizikai felülírásokra, ami részben meghiúsította a célt.

A CSS Logikai Tulajdonságok 2. szintje közvetlenül orvosolja ezeket a hiányosságokat. Nem egy radikálisan új rendszer bevezetéséről van szó, hanem az 1. szinten megkezdett rendszer befejezéséről. Ezt két fő módon éri el:

1. Új logikai tulajdonságok és értékek bevezetése olyan régebbi CSS funkciókhoz, amelyek eredendően fizikaiak voltak (mint például a float).
2. Logikai tulajdonság-megfeleltetések hozzáadása olyan összetett rövidítésekhez, amelyeket korábban figyelmen kívül hagytak (mint például a border-radius).

A 2. szinttel a teljesen folyamat-relatív stílusrendszer víziója szinte teljessé vált, lehetővé téve számunkra, hogy bonyolult, szép és robusztus komponenseket építsünk, amelyek mindenhol, mindenki számára működnek, hekkelések és felülírások nélkül.

Mélyreható betekintés: Új logikai értékek és tulajdonságok a 2. szinten

Fedezzük fel a legjelentősebb újdonságokat, amelyeket a 2. szint hoz a fejlesztői eszköztárunkba. Ezek azok az eszközök, amelyek pótolják a hiányosságokat és lehetővé teszik a valóban univerzális komponens-tervezést.

Float és Clear: A logikai forradalom

A float tulajdonság évek óta a CSS elrendezés egyik sarokköve, de értékei, a left és a right, a fizikai irány definíciói. Ha egy képet egy bekezdés left oldalára úsztatunk magyarul, az helyesnek tűnik. De ha a dokumentum irányát jobbról balra (RTL) váltjuk arab nyelvhez, a kép most a szövegblokk „rossz” oldalán van. A jobb oldalon kellene lennie, ami a sor eleje.

A 2. szint két új, logikai kulcsszót vezet be a float tulajdonsághoz:

• float: inline-start; Ez az elemet az inline irány elejére úsztatja. LTR nyelvekben ez a bal oldal. RTL nyelvekben ez a jobb oldal. A vertical-rl írásmódban ez a felső rész.
• float: inline-end; Ez az elemet az inline irány végére úsztatja. LTR-ben ez a jobb oldal. RTL-ben ez a bal oldal. A vertical-rl írásmódban ez az alsó rész.

Hasonlóképpen a clear tulajdonság, amelyet az úsztatott elemek körüli tartalom tördelésének szabályozására használnak, megkapja logikai megfelelőit:

• clear: inline-start; Törli az úsztatásokat az inline-start oldalon.
• clear: inline-end; Törli az úsztatásokat az inline-end oldalon.

Ez egy igazi áttörés. Mostantól olyan klasszikus kép-szöveg elrendezéseket hozhat létre, amelyek automatikusan alkalmazkodnak bármely nyelvi irányhoz egyetlen sor extra CSS nélkül.

Fokozott irányítás logikai átméretezéssel

A resize tulajdonság, amelyet általában textarea-n használnak, lehetővé teszi a felhasználók számára egy elem átméretezését. Hagyományos értékei a horizontal, vertical és both. De mit jelent a „horizontal” egy függőleges írásmódban? Továbbra is a fizikai vízszintes tengely menti átméretezést jelenti, ami nem biztos, hogy megfelel a felhasználó vagy a tervező szándékának. A felhasználó valószínűleg az inline tengely mentén szeretné átméretezni az elemet, hogy a sorokat hosszabbá vagy rövidebbé tegye.

A 2. szint logikai értékeket vezet be a resize tulajdonsághoz:

• resize: inline; Lehetővé teszi az átméretezést az inline tengely mentén.
• resize: block; Lehetővé teszi az átméretezést a blokk tengely mentén.

A resize: block; használata egy textarea-n magyarul lehetővé teszi a felhasználó számára, hogy magasabbá tegye azt. Függőleges írásmódban használva lehetővé teszi, hogy szélesebbé tegye (ami a blokk iránya). Egyszerűen működik.

`caption-side`: Táblázat feliratok logikai pozicionálása

A caption-side tulajdonság határozza meg egy táblázat caption-jének elhelyezését. A régi értékek a top és a bottom voltak. Ezek ismét fizikaiak. Ha a tervező szándéka az, hogy a feliratot a táblázat tartalma „elé” helyezze, a top működik a vízszintes írásmódoknál. De egy vertical-rl módban a blokk folyamat „kezdete” a jobb oldalon van, nem pedig a tetején.

A 2. szint logikai megoldást kínál:

• caption-side: block-start; A feliratot a blokk folyamat elejére helyezi.
• caption-side: block-end; A feliratot a blokk folyamat végére helyezi.

`text-align`: Egy alapvető logikai érték

Bár a start és end értékek a text-align számára már egy ideje léteznek, a logikai tulajdonságok filozófiájának központi részét képezik, és érdemes megerősíteni őket. A text-align: left; használata gyakori hiba, amely azonnal elrendezési problémákat okoz az RTL nyelvekben. A helyes, modern megközelítés mindig a következők használata:

• text-align: start; A szöveget az inline irány elejére igazítja.
• text-align: end; A szöveget az inline irány végére igazítja.

A 2. szint koronaékszere: A logikai `border-radius`

Talán a legjelentősebb és legerősebb kiegészítés a 2. szinten a border-radius logikai vezérlésére szolgáló tulajdonságok készlete. Korábban, ha azt akarta, hogy egy kártyának csak a „felső” sarkai legyenek lekerekítettek, a border-top-left-radius és a border-top-right-radius tulajdonságokat használta. Ez teljesen szétesik egy függőleges írásmódban, ahol a „felső” sarkok most a start-start és end-start sarkok.

A 2. szint négy új, részletes tulajdonságot vezet be, amelyek egy elem négy sarkára vonatkoznak folyamat-relatív módon. Az elnevezési konvenció border-[blokk-él]-[inline-él]-radius.

• border-start-start-radius: Az a sarok, ahol a block-start és az inline-start oldalak találkoznak.
• border-start-end-radius: Az a sarok, ahol a block-start és az inline-end oldalak találkoznak.
• border-end-start-radius: Az a sarok, ahol a block-end és az inline-start oldalak találkoznak.
• border-end-end-radius: Az a sarok, ahol a block-end és az inline-end oldalak találkoznak.

Ezt elsőre nehéz lehet vizualizálni, ezért nézzük meg a különböző írásmódok esetében:

A `border-radius` megfeleltetése `writing-mode: horizontal-tb` esetén (pl. magyar)

• border-start-start-radius megfelel a top-left-radius-nak.
• border-start-end-radius megfelel a top-right-radius-nak.
• border-end-start-radius megfelel a bottom-left-radius-nak.
• border-end-end-radius megfelel a bottom-right-radius-nak.

A `border-radius` megfeleltetése `writing-mode: horizontal-tb` és `dir="rtl"` esetén (pl. arab)

Itt az inline irány megfordul.

• border-start-start-radius megfelel a top-right-radius-nak. (A Block-start a felső, az inline-start a jobb).
• border-start-end-radius megfelel a top-left-radius-nak.
• border-end-start-radius megfelel a bottom-right-radius-nak.
• border-end-end-radius megfelel a bottom-left-radius-nak.

A `border-radius` megfeleltetése `writing-mode: vertical-rl` esetén (pl. japán)

Itt mindkét tengely elfordul.

• border-start-start-radius megfelel a top-right-radius-nak. (A Block-start a jobb, az inline-start a felső).
• border-start-end-radius megfelel a bottom-right-radius-nak.
• border-end-start-radius megfelel a top-left-radius-nak.
• border-end-end-radius megfelel a bottom-left-radius-nak.

Ezen új tulajdonságok használatával olyan saroklekerekítéseket definiálhat, amelyek szemantikailag a tartalom áramlásához kötődnek, nem pedig a fizikai képernyőhöz. Egy „start-start” sarok mindig a megfelelő sarok lesz, nyelvtől és szövegiránytól függetlenül.

Gyakorlati megvalósítás: Globálisan használható komponens építése

Az elmélet nagyszerű, de lássuk, hogyan működik ez a gyakorlatban. Építünk egy egyszerű profilkártya komponenst, először a régi fizikai tulajdonságokkal, majd átalakítjuk, hogy modern logikai tulajdonságokat használjon az 1. és 2. szintből egyaránt.

A kártyán lesz egy egyik oldalra úsztatott kép, egy cím, némi szöveg, valamint egy díszítő szegély és lekerekített sarkok.

A „régi” módszer: Törékeny, fizikai tulajdonságokkal rendelkező kártya

Így stílusozhattuk volna ezt a kártyát néhány évvel ezelőtt:

/* --- CSS (Fizikai tulajdonságok) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

Egy szabványos magyar LTR kontextusban ez rendben van. De ha ezt egy dir="rtl" vagy writing-mode: vertical-rl konténerbe helyezzük, az elrendezés szétesik. A díszítő szegély a rossz oldalon van, az avatár a rossz oldalon, a margó helytelen, és a lekerekített sarkok rossz helyen vannak.

Az „új” módszer: Robusztus, logikai tulajdonságokkal rendelkező kártya

Most alakítsuk át ugyanezt a komponenst logikai tulajdonságok használatával. Kihasználjuk az 1. szint tulajdonságait és a 2. szint újításait is.

/* --- CSS (Logikai tulajdonságok) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* A `padding` rövidítés már eleve logikai! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* A 2. szint ereje! */

  border-end-start-radius: 8px; /* A 2. szint ereje! */

}

.logical-card .avatar {

  float: inline-start; /* A 2. szint ereje! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

Tesztelés és ellenőrzés

Ezzel az új CSS-sel a komponenst bármilyen konténerbe beillesztheti, és az automatikusan alkalmazkodni fog.

• LTR kontextusban: Ugyanúgy fog kinézni, mint az eredeti fizikai verzió.
• RTL kontextusban (dir="rtl"): Az avatár jobbra fog úszni, a margója a bal oldalon lesz, a díszítő szegély a jobb oldalon, a szöveg pedig start-igazított lesz (jobbra). A lekerekített sarkok helyesen a jobb felső és jobb alsó sarkokon lesznek. Egyszerűen működik.
• Függőleges kontextusban (writing-mode: vertical-rl): A kártya „szélessége” (most a függőleges inline-size) 300px lesz. Az avatár a „tetejére” (inline-start) fog úszni, a margója pedig az „alján” (inline-end) lesz. A díszítő szegély a jobb oldalon (inline-start) lesz, a lekerekített sarkok pedig a jobb felső és bal felső sarkon. A komponens teljesen újrarendezte magát helyesen, média lekérdezések vagy felülírások nélkül.

Böngészőtámogatás és tartalékmegoldások (fallbacks)

Ez mind fantasztikusan hangzik, de mi a helyzet a böngészőtámogatással? A jó hír az, hogy az 1. szintű logikai tulajdonságok támogatása kiváló minden modern böngészőben. A margin-inline-start és padding-block tulajdonságokat már ma is használhatja és érdemes is használnia.

Az újabb 2. szintű funkciók támogatása gyorsan javul, de még nem univerzális. A float, clear és resize logikai értékei jól támogatottak. A logikai border-radius tulajdonságok a legújabbak, és még lehet, hogy funkciójelzők mögött vannak, vagy csak a legfrissebb böngészőverziókban érhetők el. Mint mindig, érdemes olyan forrásokat, mint az MDN Web Docs vagy a CanIUse.com, megtekinteni a legfrissebb kompatibilitási adatokért.

Stratégiák a progresszív fejlesztéshez

Mivel a CSS-t úgy tervezték, hogy rugalmas legyen, könnyedén biztosíthatunk tartalékmegoldásokat régebbi böngészők számára. A kaszkád biztosítja, hogy ha egy böngésző nem ért egy logikai tulajdonságot, egyszerűen figyelmen kívül hagyja, és az előtte definiált fizikai tulajdonságot használja.

Így írhat tartalékmegoldásokra felkészített CSS-t:

.card {

  /* Tartalékmegoldás régebbi böngészőkhöz */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* Modern logikai tulajdonság, ami felülírja a tartalékmegoldást */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

Ez a megközelítés szilárd alapélményt biztosít mindenki számára, miközben a továbbfejlesztett, adaptív elrendezést nyújtja a modern böngészőket használóknak. Olyan projekteknél, amelyeknek nem kell több írásmódot támogatniuk, ez túlzás lehet. De bármely globális alkalmazás, dizájnrendszer vagy téma esetében ez egy robusztus és jövőbiztos stratégia.

A jövő logikai: A 2. szinten túl

A fizikai gondolkodásmódról a logikaira való áttérés a modern CSS egyik legfontosabb váltása. Összehangolja a stílusnyelvünket a sokszínű, globális web valóságával. Eltávolít minket a törékeny, képernyő-orientált hekkelésektől a rugalmas, tartalom-orientált tervezés felé.

Vannak még hiányosságok? Néhány. A logikai értékek olyan tulajdonságokhoz, mint a background-position vagy a gradiensek, még vita tárgyát képezik. De a 2. szint kiadásával a mindennapi elrendezési és stílusozási feladatok túlnyomó többsége már tisztán logikai megközelítéssel elvégezhető.

A fejlesztők számára a felhívás egyértelmű: kezdjenek el alapértelmezetten logikai tulajdonságokat használni. Az inline-size legyen az alapértelmezett a width helyett. Használjanak margin-inline-t a bal és jobb margók külön beállítása helyett. Ez nem csak a különböző nyelvek támogatásáról szól; ez jobb, rugalmasabb CSS írásáról szól. Egy logikai tulajdonságokkal épített komponens eredendően újrafelhasználhatóbb és alkalmazkodóbb, akár LTR, RTL vagy függőleges elrendezésben használják. Egyszerűen jobb mérnöki munka.

Konklúzió: Fogadja be az áramlást

A CSS Logikai Tulajdonságok 2. szintje nem csupán új funkciók gyűjteménye; ez egy vízió beteljesülése. Biztosítja az utolsó, kulcsfontosságú darabokat, amelyek szükségesek ahhoz, hogy olyan elrendezéseket építsünk, amelyek tiszteletben tartják tartalmuk természetes áramlását, bármi is legyen az. Az olyan tulajdonságok befogadásával, mint a float: inline-start és a border-start-start-radius, a mesterségünket a dobozok egyszerű képernyőn való pozicionálásától a valóban globális, inkluzív és jövőbiztos webes élmények tervezéséig emeljük.

Amikor legközelebb új projektet indít vagy új komponenst épít, álljon meg, mielőtt beírná a margin-left-et. Tegye fel magának a kérdést: „A bal oldalt értem, vagy a kezdetet?” Ezzel a kis mentális váltással hozzájárul egy alkalmazkodóbb és hozzáférhetőbb webhez mindenki számára, mindenhol.